import { defineStore } from 'pinia'
import { ref } from 'vue'

interface UserInfo {
  name: string
  avatar: string
}

interface ThemeConfig {
  name: string
  primaryColor: string
  bgColor: string
  textColor: string
  sidebarBg: string
  sidebarText: string
  headerBg: string
}

// 定义多个主题配置
const themes: Record<string, ThemeConfig> = {
  light: {
    name: 'light',
    primaryColor: '#409EFF',
    bgColor: '#f5f7fa',
    textColor: '#303133',
    sidebarBg: '#304156',
    sidebarText: '#bfcbd9',
    headerBg: '#ffffff'
  },
  dark: {
    name: 'dark',
    primaryColor: '#66b1ff',
    bgColor: '#141414',
    textColor: '#e5e5e5',
    sidebarBg: '#001529',
    sidebarText: '#bfcbd9',
    headerBg: '#1f1f1f'
  },
  blue: {
    name: 'blue',
    primaryColor: '#1890ff',
    bgColor: '#f0f2f5',
    textColor: '#262626',
    sidebarBg: '#001529',
    sidebarText: '#bfcbd9',
    headerBg: '#ffffff'
  },
  green: {
    name: 'green',
    primaryColor: '#52c41a',
    bgColor: '#f6ffed',
    textColor: '#135200',
    sidebarBg: '#001f0f',
    sidebarText: '#b7eb8f',
    headerBg: '#f6ffed'
  },
  purple: {
    name: 'purple',
    primaryColor: '#722ed1',
    bgColor: '#f9f0ff',
    textColor: '#391085',
    sidebarBg: '#130824',
    sidebarText: '#d3adf7',
    headerBg: '#f9f0ff'
  },
  orange: {
    name: 'orange',
    primaryColor: '#fa8c16',
    bgColor: '#fff7e6',
    textColor: '#873800',
    sidebarBg: '#612500',
    sidebarText: '#ffd591',
    headerBg: '#fff7e6'
  }
}

// 使用 Composition API 风格的 Pinia Store
export const useAppStore = defineStore('app', () => {
  // State
  const theme = ref()
  const themeConfig = ref<any>(themes.light!) //非空断言
  
  const sidebarCollapsed = ref(false)

  const user = JSON.parse(localStorage.getItem('user') || '{}')

  const userInfo = ref<UserInfo>({
    name: user.username || '管理员',
    avatar: ''
  })

  // Actions
  const setTheme = (newTheme: string) => {
    theme.value = newTheme
    const selectedTheme = themes[newTheme];
    if (selectedTheme) {
      themeConfig.value = selectedTheme;
    } else {
      themeConfig.value = themes.light;
    }
    applyThemeToDOM()
  }
  
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }
  
  const clearCache = () => {
    localStorage.clear()
    sessionStorage.clear()
  }
  
  const logout = () => {
    clearCache()
    window.location.href = '/login'
  }
  
  const applyThemeToDOM = () => {
    const root = document.documentElement
    root.style.setProperty('--primary-color', themeConfig.value.primaryColor)
    root.style.setProperty('--bg-color', themeConfig.value.bgColor)
    root.style.setProperty('--text-color', themeConfig.value.textColor)
    root.style.setProperty('--sidebar-bg', themeConfig.value.sidebarBg)
    root.style.setProperty('--sidebar-text', themeConfig.value.sidebarText)
    root.style.setProperty('--header-bg', themeConfig.value.headerBg)
  }

  return {
    // State
    theme,
    themeConfig,
    sidebarCollapsed,
    userInfo,
    
    // Actions
    setTheme,
    toggleSidebar,
    clearCache,
    logout,
    applyThemeToDOM
  }
})
